<template>
	<div v-if="data" class="text-t-1 mb-4 px-3 py-2 rounded-lg bg-[#7864FF29] text-sm">
		<span class="mr-1 text-primary">
			<base-icon name="discover2" size="14" />
		</span>
		<i18n-t keypath="wallet.deposit.activity" scope="global">
			<template #min>
				<base-amount
					class="text-primary"
					:value="data.minDepositAmount"
					:currency="currency"
					:currency-to="currencyTo" />
			</template>
			<template #percent>
				<span class="text-primary">{{ percentage(data.bonusPercentage) }}</span>
			</template>
			<template #max>
				<base-amount
					class="text-primary"
					:value="data.maxBonusAmount"
					:currency="currency"
					:currency-to="currencyTo" />
			</template>
			<template #cs>
				<span class="text-primary app-text-link" @click="customerService()">
					{{ $t('app.waiter') }}
				</span>
			</template>
		</i18n-t>
	</div>
</template>

<script setup lang="ts">
import { customerService, percentage } from '@/utils'
import { BaseAmount, BaseIcon } from '@/components/base'
import { CurrencyCryptoEnum, CurrencyEnum } from '@/enums'
import { computed, onMounted, PropType } from 'vue'
import { useWalletStore } from '@/store'

defineOptions({ name: 'ViewsWalletDepositActivity' })

defineProps({
	currency: {
		type: String as PropType<CurrencyEnum>,
		default: CurrencyCryptoEnum.USDT
	},
	currencyTo: {
		type: String as PropType<CurrencyEnum>,
		default: CurrencyCryptoEnum.USDT
	}
})

const walletStore = useWalletStore()
const data = computed(() => walletStore.depositBonus)

onMounted(() => walletStore.getDepositBonus())
</script>

<style scoped></style>
